<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创界科技 - 新野蛮主义企业落地页</title>
    <style>
        /* 基础样式与变量定义 */
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --dark: #292F36;
            --light: #F7FFF7;
            --border-width: 4px;
            --shadow-offset: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            padding: 20px;
            line-height: 1.6;
        }

        /* 新野蛮主义核心样式类 */
        .neu-card {
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            background-color: white;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .neu-card:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button {
            display: inline-block;
            padding: 12px 24px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: bold;
            text-decoration: none;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .neu-button:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button.secondary {
            background-color: var(--secondary);
        }

        .neu-button.accent {
            background-color: var(--accent);
        }

        /* 布局样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 40px;
            border-bottom: var(--border-width) solid var(--dark);
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            text-shadow: 3px 3px 0px var(--dark);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: bold;
            padding: 8px 16px;
            border: var(--border-width) solid transparent;
            transition: all 0.2s ease;
        }

        nav a:hover {
            border: var(--border-width) solid var(--dark);
            background-color: var(--accent);
        }

        section {
            margin-bottom: 80px;
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 40px;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 100px;
            height: 5px;
            background-color: var(--primary);
            margin: 15px auto 0;
        }

        /* Hero区块 */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero-image {
            background-color: var(--secondary);
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        /* 特性区块 */
        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .feature-card {
            padding: 30px;
            text-align: center;
        }

        .feature-card h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.8rem;
        }

        /* 公司简介区块 */
        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .about-image {
            background-color: var(--primary);
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        .about-content h2 {
            margin-bottom: 20px;
        }

        /* 产品区块 */
        .products {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .product-card {
            padding: 25px;
            text-align: center;
        }

        .product-image {
            height: 150px;
            background-color: var(--secondary);
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* 服务区块 */
        .services {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .service-card {
            padding: 30px;
        }

        .service-card h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        /* 团队区块 */
        .team {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .team-member {
            text-align: center;
        }

        .member-photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* 常见问题区块 */
        .faq {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            margin-bottom: 20px;
        }

        .faq-question {
            font-weight: bold;
            margin-bottom: 10px;
            cursor: pointer;
            padding: 15px;
            background-color: white;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .faq-question:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .faq-answer {
            padding: 15px;
            background-color: white;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            margin-top: 10px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        /* 号召区块 */
        .cta {
            text-align: center;
            padding: 60px 40px;
            background-color: var(--secondary);
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        .cta h2 {
            margin-bottom: 20px;
            font-size: 2.5rem;
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 40px 0;
            border-top: var(--border-width) solid var(--dark);
            margin-top: 40px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
        }

        .footer-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: bold;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero {
                grid-template-columns: 1fr;
            }

            .features {
                grid-template-columns: 1fr;
            }

            .about {
                grid-template-columns: 1fr;
            }

            .products {
                grid-template-columns: 1fr;
            }

            .services {
                grid-template-columns: 1fr;
            }

            .team {
                grid-template-columns: repeat(2, 1fr);
            }

            header {
                flex-direction: column;
                gap: 20px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">创界科技</div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="services.html">服务</a></li>
                    <li><a href="team.html">团队</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="job.html">岗位招聘</a></li>
                </ul>
            </nav>
        </header>

        <section id="home" class="hero">
            <div class="hero-content">
                <h1>创新科技<br>重塑未来</h1>
                <p>创界科技致力于通过前沿技术和创新解决方案，为企业提供数字化转型的强大动力。我们相信技术的力量可以改变世界，创造更美好的未来。</p>
                <div style="margin-top: 30px;">
                    <a href="#contact" class="neu-button">联系我们</a>
                    <a href="#about" class="neu-button secondary" style="margin-left: 15px;">了解更多</a>
                </div>
            </div>
            <div class="hero-image neu-card">
                企业创新解决方案
            </div>
        </section>

        <section class="features">
            <div class="feature-card neu-card">
                <div class="feature-icon">■</div>
                <h3>前沿技术</h3>
                <p>采用最新技术栈，确保解决方案的先进性和可持续性。</p>
            </div>

            <div class="feature-card neu-card">
                <div class="feature-icon">▲</div>
                <h3>专业团队</h3>
                <p>拥有经验丰富的技术专家和行业顾问团队。</p>
            </div>

            <div class="feature-card neu-card">
                <div class="feature-icon">●</div>
                <h3>定制方案</h3>
                <p>根据客户需求量身定制解决方案，确保最佳效果。</p>
            </div>
        </section>

        <section id="about" class="about">
            <div class="about-image neu-card">
                公司形象
            </div>
            <div class="about-content">
                <h2 class="section-title">关于创界科技</h2>
                <p>创界科技成立于2015年，是一家专注于企业数字化转型的高科技公司。我们致力于通过创新的技术解决方案，帮助企业在数字化时代保持竞争力。</p>
                <p>我们的团队由来自全球顶尖科技公司的专家组成，拥有丰富的行业经验和深厚的技术背景。我们相信技术的力量可以改变商业模式，创造新的价值。</p>
                <p>截至目前，我们已经为超过500家企业提供了数字化转型解决方案，客户遍布金融、制造、零售、教育等多个行业。</p>
                <div style="margin-top: 30px;">
                    <a href="#contact" class="neu-button">了解更多</a>
                </div>
            </div>
        </section>

        <section id="products">
            <h2 class="section-title">我们的产品</h2>
            <div class="products">
                <div class="product-card neu-card">
                    <div class="product-image">智能ERP系统</div>
                    <h3>创界ERP</h3>
                    <p>一体化企业资源规划系统，集成财务管理、供应链管理、人力资源等模块。</p>
                </div>

                <div class="product-card neu-card">
                    <div class="product-image">数据分析平台</div>
                    <h3>数据洞察</h3>
                    <p>强大的数据分析与可视化平台，帮助企业从数据中发现商业价值。</p>
                </div>

                <div class="product-card neu-card">
                    <div class="product-image">云协作工具</div>
                    <h3>团队协作云</h3>
                    <p>高效的团队协作平台，支持远程办公和项目管理。</p>
                </div>
            </div>
        </section>

        <section id="services">
            <h2 class="section-title">我们的服务</h2>
            <div class="services">
                <div class="service-card neu-card">
                    <h3>数字化转型咨询</h3>
                    <p>为企业提供全面的数字化转型战略规划，包括技术选型、流程优化和组织变革。</p>
                </div>

                <div class="service-card neu-card">
                    <h3>定制软件开发</h3>
                    <p>根据企业特定需求，开发定制化的软件解决方案，确保最佳的业务匹配度。</p>
                </div>

                <div class="service-card neu-card">
                    <h3>系统集成服务</h3>
                    <p>整合企业现有系统，实现数据互通和业务流程自动化。</p>
                </div>

                <div class="service-card neu-card">
                    <h3>技术培训与支持</h3>
                    <p>提供全面的技术培训和持续的技术支持服务，确保系统稳定运行。</p>
                </div>
            </div>
        </section>

        <section id="team">
            <h2 class="section-title">核心团队</h2>
            <div class="team">
                <div class="team-member">
                    <div class="member-photo">张总</div>
                    <h3>张明</h3>
                    <p>首席执行官</p>
                </div>

                <div class="team-member">
                    <div class="member-photo">李总</div>
                    <h3>李华</h3>
                    <p>技术总监</p>
                </div>

                <div class="team-member">
                    <div class="member-photo">王总</div>
                    <h3>王强</h3>
                    <p>产品总监</p>
                </div>

                <div class="team-member">
                    <div class="member-photo">赵总</div>
                    <h3>赵雪</h3>
                    <p>运营总监</p>
                </div>
            </div>
        </section>

        <section class="faq">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-item">
                <div class="faq-question">数字化转型需要多长时间？</div>
                <div class="faq-answer">
                    <p>数字化转型的时间因企业规模、现有技术基础和转型目标而异。一般来说，小型企业可能需要3-6个月，中型企业6-12个月，大型企业可能需要1-2年或更长时间。</p>
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">如何选择适合的数字化转型方案？</div>
                <div class="faq-answer">
                    <p>选择数字化转型方案时，需要考虑企业的业务需求、技术基础、预算和长期目标。我们的咨询团队可以为您提供专业的评估和建议，帮助您选择最适合的方案。</p>
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">数字化转型的投资回报率如何？</div>
                <div class="faq-answer">
                    <p>数字化转型的投资回报率通常体现在效率提升、成本降低、收入增长和客户满意度提高等方面。根据我们的客户数据，大多数企业在数字化转型后的一年内就能看到明显的投资回报。</p>
                </div>
            </div>
        </section>

        <section class="cta">
            <h2>准备好开始数字化转型了吗？</h2>
            <p>联系我们，获取免费的初步咨询和定制方案</p>
            <div style="margin-top: 30px;">
                <a href="#contact" class="neu-button accent">立即咨询</a>
            </div>
        </section>

        <footer id="contact">
            <div class="logo">创界科技</div>
            <div class="footer-links">
                <a href="#home">首页</a>
                <a href="#about">关于我们</a>
                <a href="#products">产品</a>
                <a href="#services">服务</a>
                <a href="#team">团队</a>
                <a href="#contact">联系我们</a>
            </div>
            <p>地址：北京市海淀区科技园区创新大厦15层</p>
            <p>电话：010-12345678 | 邮箱：contact@chuangjie-tech.com</p>
            <p style="margin-top: 20px;">© 2023 创界科技 | 创新驱动未来</p>
        </footer>
    </div>
</body>

</html>